<template>
  <div id="user">
    <div class="userheader">
    </div>
    <div class="flx">
      <p class="touxiang"><img src="" alt=""></p>
      <p class="lijidenglv" is="router-link" to="/login" tag="p">立即登录</p>
      <ul class="list">
        <li><van-icon name="balance-list-o" /><span>淘宝订单</span></li>
        <li><van-icon name="like-o" /><span>我的收藏</span></li>
        <li><van-icon name="browsing-history-o" /><span>最近浏览</span></li>
      </ul>
    </div>
    <div class="qiehuan">
      <div class="infor">
        <p>切换到{{ megnv }}生版</p>
        <p class="p2">给你更多好看！</p>
      </div>
      <div class="gb"><van-switch v-model="checked" active-color="#07c160" inactive-color="#ee0a24" /></div>
    </div>
    <div class="qiandaodaka">
      <div>
        <P><van-icon name="balance-o" /></P>
        <P>活动钱包</P>
      </div>
            <div>
        <P><van-icon name="balance-pay" /></P>
        <P>打卡赚钱</P>
      </div>
            <div>
        <P><van-icon name="sign" /></P>
        <P>每日签到</P>
      </div>
    </div>
    <div class="kefu">
      <p><span>联系QQ客服</span><span><van-icon name="arrow" /></span></p>
      <p><span>求打分好评</span><span><van-icon name="arrow" /></span></p>
      <p><span>帮助与反馈</span><span><van-icon name="arrow" /></span></p>
      <p><span>关于熊猫优选</span><span><van-icon name="arrow" /></span></p>

    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Switch, Icon } from 'vant'

Vue.use(Switch)
Vue.use(Icon)

export default {
  name: 'User',
  data () {
    return {
      checked: true,
      megnv: '女',
      megnan: '男'
    }
  }
}
</script>

<style lang="scss" scoped>

#user {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #eeefff;
  box-sizing: border-box;

  .userheader {
  width: 100%;
  height: 30%;
  background-color: #fde35b;
  margin-bottom: 15%;
  }

  .flx {
    width: 90%;
    height: 25%;
    position: absolute;
    top: 10%;
    left: 5%;
    background-color: #fff;
    border-radius: 10px;
    text-align: center;

    .lijidenglv {
      width: 25%;
      height: 30%;
      margin-left: 38%;
      margin-top: 10%;
      font-size: 15px
    }

    ul {
      width: 100%;
      height: 40%;
      display: flex;
      justify-content: space-around;
      font-size: 14px;

      li {
        display: flex;
        width: 25%;
        height: 100%;
        flex-direction: column;
        justify-content: space-around;
        text-align: center;
        align-self: center;
        .van-icon {
          font-size: 24px;
        }
      }
    }
  }

  .qiehuan {
    padding: 5%;
    width: 100%;
    height: 12%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 5%;
    background-color: #fff;
    box-sizing: border-box;
    align-items: center;

    .infor {
      .p2 {
        font-size: 12px;
        color: #ccc;
      }
    }
  }

  .qiandaodaka {
    width: 90%;
    height: 15%;
    margin-left: 5%;
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 5%;
    display: flex;
    justify-content: space-around;
    align-items: center;

    div {
      width: 15%;
      height: 10%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      font-size: 12px;
      text-align: center;

       .van-icon {
          font-size: 36px;
        }
    }
  }

  .kefu {
        height: 28%;
        font-weight: 500;
        background-color: lavender;

    p {
      height: 25%;
      width: 100%;
      padding: 5%;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      border-bottom: 1px solid #ccc;
      align-items: center;
    }
  }
}

</style>
